<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="年度" prop="year">
                <a-input v-model="queryParam.year" placeholder="请输入年" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="月份" prop="month">
                <a-input v-model="queryParam.month" placeholder="请输入月份" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-if="currentDeptId == 100">
              <a-form-item label="校区" prop="deptId">
                <a-tree-select
                  v-model="queryParam.deptId"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="deptOptions"
                  placeholder="请选择校区"
                  :replaceFields="{children:'children', title:'label', key:'id', value: 'id' }	"
                  tree-default-expand-all
                >
                </a-tree-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            
          </a-row>
        </a-form>
      </div>
      <div class="table-operations">
        <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
        <a-button type="primary" @click="openProportion"><a-icon type="pie-chart" />占比</a-button>
        <a-button type="primary" @click="handleExport"><a-icon type="download" />导出</a-button>
      </div>
    
      <!-- 数据展示 -->
      <a-list
        :grid="{gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1}"
        style="margin: 0 -8px"
      >
        <a-list-item :key="item" v-for="item in list" style="padding: 0 8px">
          <a-card>
            <a-card-meta :title="item.userName">
              <a-avatar slot="avatar" style="color: white; backgroundColor: #1890ff">{{dealName(item.userName)}}</a-avatar>
            </a-card-meta>
              <a-tooltip class="tool"  title="业绩图表" slot="actions" @click="openBarChart(item)">
                <a-icon type="bar-chart" />
              </a-tooltip>
            <div class="content">
              <div>
                <p>年度业绩</p>
                <p>{{item.charge}}万</p>
              </div>
              <div>
                <p>成单数</p>
                <p>{{item.count}}单</p>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </a-card>

    <!-- 查看图表 -->
    <a-modal
      title="已完成情况"
      :visible="visible"
      width="50%"  
      @cancel="visible = false"
      @ok="visible = false"
    >
      <a-divider orientation="left">课包</a-divider>
      <a-descriptions title="" >
        <template v-for="item in packageData">
          <a-descriptions-item :label="item.item">{{ item.count }}个</a-descriptions-item>
        </template>
      </a-descriptions>
      <a-divider orientation="left">来源</a-divider>
      <a-descriptions title="" >
        <template v-for="item in sourceData">
          <a-descriptions-item  :label="item.item">{{ item.count }}个</a-descriptions-item>
        </template>
      </a-descriptions>
      <a-divider orientation="left">业绩</a-divider>
      <rank ref="rank" :data="rankList" :position="'月份*业绩'"/>
      <a-divider orientation="left">渠道占比</a-divider>
      <sales-data :ref="salesData" :data="channelList"/>
    </a-modal>

    <!-- 人员销售占比 -->
    <a-modal
      title="人员业绩占比"
      :visible="proportionShow"
      width="50%"  
      @cancel="proportionShow = false"
      @ok="proportionShow = false"
    >
    <sales-data :ref="salesData" :data="salesData"/>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { delPerform,getChannelReportByParams} from '@/api/manager/perform'
import { getPersionReport,getPersionReportChart,getPackageReportChart,getProportion} from '@/api/manager/report'
import CreateForm from './modules/CreateForm'
import { tableMixin } from '@/store/table-mixin'
import { treeselect } from '@/api/system/dept'
import moment from 'moment'
import Rank from '../../../components/card/Rank'
import SalesData from '../../SalesData'
import storage from'store'

export default {
  name: 'Perform',
  components: {
    CreateForm,Rank,SalesData
  },
  mixins: [tableMixin],
  data () {
    return {
      channelList:[],
      currentDeptId:null,
      proportionShow:false,
      rankList:[],
      visible:false,
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      // 查询参数
      queryParam: {
        year: null,
        userName:null,
        deptId:null,
        month:null
      },
      columns: [
        {
          title: '用户ID',
          dataIndex: 'id',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '校区编号',
          dataIndex: 'deptId',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '年',
          dataIndex: 'year',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '业绩',
          dataIndex: 'perform',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '月',
          dataIndex: 'month',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ],
      deptOptions:[],
      sourceData:[],
      packageData:[],
      salesData:[],
    }
  },
  filters: {
  },
  created () {
    this.queryParam.year = moment().year();
    this.queryParam.month = moment().month() + 1;
    this.getList()
    this.getTreeselect()
    this.currentDeptId= storage.get("deptId");
  },
  computed: {
  },
  watch: {
  },
  methods: {
    channelReport(item){
      getChannelReportByParams(
        {
          deptId:item.deptId,
          year: item.year,
          month: item.month,
          userId: item.userId
        }
      ).then(resp => {
        this.channelList = resp.data;
      });
    },
    openProportion(){
      getProportion(this.queryParam).then(resp => {
        this.salesData = resp.data;
        this.proportionShow = true;
      });
    },
    openChart(item,type){
      getPackageReportChart({
        deptId:item.deptId,
        month: item.month,
        year: item.year,
        userId: item.userId,
        type:type
      }).then(resp => {
        if(type == 1){
          this.packageData = resp.data;
        }else{
          this.sourceData = resp.data;
        }
      });
    },
    openBarChart(item){
      this.visible = true;
      this.openChart(item,1);
      this.openChart(item,2);
      this.channelReport(item);
      getPersionReportChart({
        deptId:item.deptId,
        year: item.year,
        userId: item.userId
      }).then(resp => {
        this.chartType = 0
        this.rankList = resp.data;
      });
    },
    dealName(name){
      return name.slice(0,1);
    },
    /** 查询部门下拉树结构 */
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    clickDeptNode (deptId) {
      this.queryParam.deptId = deptId
      this.handleQuery()
    },
    /** 查询校区业绩列表 */
    getList () {
      this.loading = true
      getPersionReport(this.queryParam).then(response => {
        this.list = response.data
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      if(this.queryParam.year.toString().length != 4){
        this.$message.error('年度填写错误！');
        return;
      }
      if(this.queryParam.month > 12 || this.queryParam.month < 0){
        this.$message.error('月份填写错误！');
        return;
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        deptId: undefined,
        year: undefined,
        perform: undefined,
        month: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 删除按钮操作 */
    handleDelete (item) {
      let that = this;
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk () {
          return delPerform(item.deptId,item.year)
            .then(() => {
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
          })
        },
        onCancel () {}
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('manager/report/repotExport', {
            ...that.queryParam
          }, `perform_${new Date().getTime()}.xlsx`)
        },
        onCancel () {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .clearfix() {
    zoom: 1;
    &:before,
    &:after {
      content: ' ';
      display: table;
    }
    &:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
  }
  .content {
    .clearfix();
    margin-top: 16px;
    margin-left: 40px;
    & > div {
      position: relative;
      text-align: left;
      float: left;
      width: 50%;
      p {
        line-height: 32px;
        font-size: 24px;
        margin: 0;
      }
      p:first-child {
        color: 'rgba(0, 0, 0, 0.45)';
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 4px;
      }
    }
  }
</style>